<template>
	<view class="container">
		<form @submit.prevent="submit">
			<view class="items">
				<view class="item_table">
					账 &nbsp;&nbsp;号
				</view>
				<view class="item_input">
					<input class="inputs_item" v-model="formData.name" auto-focus placeholder=" 请输入您的账号"
						placeholder-class='placeholder' />
				</view>
			</view>

			<view class="items">
				<view class="item_table">
					原密码
				</view>
				<view class="item_input">
					<input class="inputs_item" v-model="formData.oldpwd" auto-focus placeholder=" 请输入您的原密码"
						placeholder-style='placeholder' />
				</view>
			</view>

			<view class="items">
				<view class="item_table">
					新密码
				</view>
				<view class="item_input">
					<input class="inputs_item" v-model="formData.newpwd" auto-focus placeholder=" 请输入您的新密码"
						placeholder-style='placeholder' />
				</view>
			</view>

			<view class="items">
				<view class="item_table">
					新密码
				</view>
				<view class="item_input">
					<input class="inputs_item" v-model="formData.newspwd" auto-focus placeholder=" 请再次输入您的新密码"
						placeholder-style='placeholder' />
				</view>
			</view>

			<button class="change_btn" @click="submit">确认修改</button>
		</form>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js";
	import JSEncrypt from '@/static/js/jsencrypt.min.js'
	export default {
		data() {
			return {
				token: wx.getStorageSync('token'),
				formData: {
					name: '',
					oldpwd: '',
					newpwd: '',
					newspwd: '' // 确认新密码  
				},
				roles:wx.getStorageSync("roles"),
			}
		},
		methods: {
			// 处理表单提交的方法  
			submit() {
				const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
					'2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
				const encryptor = new JSEncrypt()
				encryptor.setPublicKey(publicKey)

				const oldPass = encryptor.encrypt(this.formData.oldpwd);
				const newPass = encryptor.encrypt(this.formData.newpwd);


				// 在这里添加表单验证逻辑  
				if (this.formData.name === '') {
					wx.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (this.formData.oldpwd === '') {
					wx.showToast({
						title: '请输入原密码',
						icon: 'none'
					});
					return;
				}
				if (this.formData.newpwd === '') {
					wx.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return;
				}
				if (this.formData.newpwd !== this.formData.newspwd) {
					wx.showToast({
						title: '两次输入的新密码不一致，请重新输入',
						icon: 'none'
					});
					return;
				}

				$http.request({
					url: "/common/weichat/auth/changePassword",
					header: {
						Authorization: this.token
					},
					data: {
						newPass: newPass,
						oldPass: oldPass,
					},
					method: 'POST'
				}).then((res) => {
					if (res.code === 200) {
						wx.showModal({
							title: '提示',
							content: '您的密码修改成功，请重新登录！',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									wx.removeStorageSync('token');
									wx.reLaunch({
										url: '/pages/users/login/index'
									});
								}
							}
						});
					} else {
						wx.showToast({
							title: '密码修改失败',
							icon: 'none',
							duration: 2000
						});
					}
				}).catch((error) => {
					wx.showToast({
						title: '请求失败，请检查您的网络连接或稍后重试',
						icon: 'none',
						duration: 2000
					});
					console.error('请求失败:', error);
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/sass/all/all.scss';

	form {
		margin-top: 80rpx;
	}

	.items {
		width: 678rpx;
		height: 73rpx;
		line-height: 73rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-size: cover;
		border-radius: 20rpx;
		margin-bottom: 37rpx;

		.item_table {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 73rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 10rpx;
			background: linear-gradient(to right, rgba(19, 181, 161, 1), rgba(0, 129, 138, 1));
		}

		.item_input {
			width: 518rpx;
			background-color: #FFFFFF;

			.inputs_item {
				width: 518rpx;
				height: 73rpx;
				background-color: #FFFFFF;
			}
		}
	}

	.change_btn {
		width: 676rpx;
		height: 91rpx;
		line-height: 91rpx;
		font-weight: 400;
		font-size: 33rpx;
		color: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx 2rpx #0a646c;
		background: linear-gradient(to right, rgba(19, 182, 162, 1), rgba(0, 129, 139, 1));
	}
</style>